import React, { Component } from 'react';
//引入路由
import { NavLink, Route } from 'react-router-dom';
//引入antd样式
import { Input, Row, Col } from 'antd';
//引入写的样式
import './index.scss';
export default class Index extends Component {
  render() {
    return (
      <React.Fragment>
        <div className="zrb-header">
          <Row>
            <Col xs={3} sm={3} md={3} lg={3} xl={3}>
              <img
                src="https://b-gold-cdn.xitu.io/v3/static/img/simplify-logo.3e3c253.svg"
                alt=""
              />
            </Col>
            <Col xs={16} sm={16} md={16} lg={16} xl={16}>
              <Input width="100%" placeholder="搜索掘金" size="large" />
            </Col>
            <Col xs={5} sm={5} md={5} lg={5} xl={5}>
              <nav>
                <NavLink className="zrb-input-1" to="/register" exact>
                  注册
                </NavLink>
                <span style={{ fontWeight: 'bold' }}>*</span>
                <NavLink className="zrb-input-1" to="/login">
                  登陆
                </NavLink>
              </nav>
            </Col>
          </Row>
        </div>
        <hr />
        <div>
          <Row type="flex" className="ant-row-flex">
            <Col span={4}>
              <NavLink to="/" exact>
                推荐
              </NavLink>
            </Col>
            <Col span={4}>
              <NavLink to="/backend">后端</NavLink>
            </Col>
            <Col span={4}>
              <NavLink to="/frontend">前端</NavLink>
            </Col>
            <Col span={4}>
              <NavLink to="/android">Android</NavLink>
            </Col>
            <Col span={4}>
              <NavLink to="/ios">IOS</NavLink>
            </Col>
            <Col span={4}>
              <NavLink to="/artificial">人工智能</NavLink>
            </Col>
            <Col span={4}>
              <NavLink to="/tool">开发工具</NavLink>
            </Col>
          </Row>
        </div>
      </React.Fragment>
    );
  }
}
